<template>
  <section class="register">
    <img class="banner" src="http://imgcps.jd.com/ling/7110131/55S36KOF6KGs6KGr6IqC/6Leo5bqX5ruhMjk55YePODA/p-5bd8253082acdd181d02fa6d/9e8bbcca.jpg"/>
    <cube-form
      class="from_input"
      :model="model"
      :schema="schema"
      @submit.prevent="submitHandler"
    >
    </cube-form>
    <div class="code" @click="refreshCode">
      <s-identify :identifyCode="identifyCode"></s-identify>
      <p>看不清换一张</p>
    </div><!--验证码-->
  </section>
</template>

<script>
import SIdentify from '../../common/Identify'
export default {
  name: 'Register',
  components: {
    SIdentify
  },
  data () {
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      times: 60,
      model: {
        username: '',
        password: '',
        num: ''
      },
      schema: { // 配置
        fields: [
          { // 用户名配置
            type: 'input',
            modelKey: 'username',
            label: '用户名',
            props: {
              placeholder: '请输入用户名'
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              min: 3
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的用户名',
              min: '用户名不得小于3位'
            }
          },
          { // 用户名配置
            type: 'input',
            modelKey: 'password',
            label: '密码',
            props: {
              placeholder: '请输入密码',
              type: 'password', // 密码不可看
              eye: { // 小眼睛
                open: false
              }
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              min: 6
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的密码',
              min: '密码不得小于6位'
            }
          },
          { // 用户名配置
            type: 'input',
            modelKey: 'num',
            label: '验证码',
            props: {
              placeholder: '请输入验证码',
              type: 'number'
            },
            rules: { // 校验
              required: true, // 必填
              type: 'string',
              len: 4
            },
            register: 'blur', // 失去焦点后就会检测
            message: {
              required: '请输入正确的密码',
              len: '密码必须为6位'
            }
          },
          {
            label: '登录',
            type: 'submit'
          }
        ]
      }
    }
  },
  methods: {
    async submitHandler () { // 提交登录
      try { // try...catch 的作用是测试代码中的错误。
        if (this.model.num === this.identifyCode) {
          const result = await this.axios.get('/login', { params: this.model })
          if (result.code == '0') { // 不能用=== js尽量少用全等于
            console.log(result.message)
            this.$store.commit('setToken', result.token)
            localStorage.setItem('token', result.token)
            this.$router.replace('/footer') // 防止返回上一层页面
            if (this.$route.query.redirect) { // 判断路由是否带参，带参则去到重定向参数地址，否则就去首页
              this.$router.replace({ path: this.$route.query.redirect }) // 跟main.js相对应，跳转到没有token的那个页面
            } else {
              this.$router.replace('/footer/home') // 防止返回上一层页面
            }
            // this.model.username = ''
            // this.model.password = ''
            // this.model.num = ''
            this.refreshCode()
          } else {
            console.log(result.message)
            this.refreshCode()
          }
        } else {
          alert('图形验证码错误')
          this.refreshCode()
          this.model.password = ''
          this.model.num = ''
        }
      } catch (err) {
        console.log(err)
        this.refreshCode()
      }
    },
    // 图形验证码
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
      console.log(this.identifyCode)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes [
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      console.log(this.identifyCode)
    }
  },
  mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  }
}
</script>

<style lang="stylus" scoped>
  .register
    .banner
      width 100%
      height 200px
  .from_input >>> .border-bottom-1px::after
    border-bottom: 2px solid #e8e8e8
  .code
    position absolute
    right 0
    top 45%
    width: 40%
    p
      font-size 13px
      display none
</style>
